<script setup lang="ts">
import 'mavon-editor/dist/css/index.css'
import 'github-markdown-css';
// 引入默认样式
import 'highlight.js/scss/default.scss'
// 引入个性化的vs2015样式
import 'highlight.js/styles/vs2015.css'

import md from "@/assets/text.md?raw"
import hljs from 'highlight.js/styles/default.css'
import {getArticleByIdUrl} from "@/api/blog/article.ts";


import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import Comment from "@/components/Comment/index.vue";
import BlogContent from "@/components/BlogContent/index.vue";

const id = 'preview-only';
const scrollElement = document.getElementById("blog-app");

const $route = useRoute()
const artId = ref($route.params.artId)
const artContent = ref('## I/O 通讯程序\n' +
    '\n' +
    'BIO、NIO、AIO 模型\n' +
    '\n' +
    ' \n' +
    '\n' +
    'BIO\n' +
    '\n' +
    '```java\n' +
    '// 阻塞程序\n' +
    'public class Main {\n' +
    '    public static void main(String[] args) throws IOException {\n' +
    '        ServerSocket serverSocket = new ServerSocket(9000);\n' +
    '        while (true) {\n' +
    '            System.out.println("等待连接。。");\n' +
    '            //阻塞方法\n' +
    '            Socket clientSocket = serverSocket.accept();\n' +
    '            System.out.println("有客户端连接了。。");\n' +
    '            // 当有连接到来的时候 创建新的线程进行连接\n' +
    '            new Thread(new Runnable(){\n' +
    '                @Override\n' +
    '                public void run() {\n' +
    '                    try {\n' +
    '                        handler(clientSocket);\n' +
    '                    } catch (IOException e) {\n' +
    '                        throw new RuntimeException(e);\n' +
    '                    }\n' +
    '                }\n' +
    '            });\n' +
    '        }\n' +
    '    }\n' +
    '\n' +
    '    private static void handler(Socket clientSocket) throws IOException {\n' +
    '        byte[] bytes = new byte[1024];\n' +
    '        System.out.println("准备read。。");\n' +
    '        //接收客户端的数据，阻寒方法，没有数据可读时就阻塞\n' +
    '        int read = clientSocket.getInputStream().read(bytes);\n' +
    '        System.out.println("read完毕。。");\n' +
    '        if (read != -1) {\n' +
    '            System.out.println("接收到客户端的数据：" + new String(bytes, 0, read));\n' +
    '        }\n' +
    '        System.out.println("end");\n' +
    '    }\n' +
    '}\n' +
    '// 存在的问题?\n' +
    '// 当有连接到来的时候 创建新的线程进行连接\n' +
    '// 会出现 C10k  C10m = 10X100万个连接 问题\n' +
    '// 来了 10000 个连接, 这里会创建 10000 个线程\n' +
    '// 会将服务端内存占用满, oom 问题\n' +
    '// 解决方法: 线程池\n' +
    '// 线程池 500 个, 现在 500 个连接都满了, 并且现在都没有消息来 read, 怎么解决还有来的连接?\n' +
    '// 使用 NIO\n' +
    '```\n' +
    '\n' +
    '\n' +
    '\n' +
    'NIO\n' +
    '\n' +
    '\n' +
    '\n' +
    '浪费 cpu，程序空转\n' +
    '\n' +
    '连接的 list 太多遍历消耗太大\n' +
    '\n' +
    '\n' +
    '\n' +
    '\n' +
    '\n' +
    '\n' +
    '\n' +
    '## Netty 百万并发连接\n' +
    '\n' +
    '\n' +
    '\n' +
    '## 通义千问\n' +
    '\n' +
    '\n' +
    '\n')
const artFrom = ref({
  artTitle: null
})
const titleList = ref([])
const getArticleById = () => {
  getArticleByIdUrl({artId: artId.value}).then(res => {
    console.log(res)
    artFrom.value = res.data
    artContent.value = res.data.artContent
    // htmlText.value = markdown.render(artContent.value);
    // VditorPreview.preview(
    //     document.getElementById('vditor'), artContent.value,
    //     {
    //       markdown: md,
    //       hljs: {
    //         enable: true,
    //         style: 'vs'
    //       },
    //       outline: {
    //         enable: true,
    //       }
    //     }
    // )

    // nextTick(() => {
    //   const anchors = previewRef.value.$el.querySelectorAll('h1,h2,h3,h4,h5,h6');
    //   console.log("anchors", anchors)
    //   const titles = Array.from(anchors).filter((title) => !!title?.innerText.trim());
    //   if (!titles.length) {
    //     titleList.value = [];
    //     return;
    //   }
    //   console.log("titles", titles)
    //   const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort();
    //   console.log("titles", hTags)
    //
    //   titleList.value = titles.map((el) => ({
    //     title: el.innerText,
    //     lineIndex: el.getAttribute('data-v-md-line'),
    //     indent: hTags.indexOf(el.tagName),
    //     // 是否展开折叠
    //     isFlod: true
    //   }));
    //   console.log("titleList", titleList.value)
    // })

  })
}

const article = {
  title: 'vue3 源码中执行 script/dev 的具体过程',
  // 发布日期
  publishDate: '2026年10月01日 21:00:00',
  content: md,
}

const previewRef = ref(null)

onMounted(() => {



  if (artId) {
    // getArticleById()
  }
})


function handleAnchorClick(anchor) {
  const {lineIndex} = anchor;
  const heading = previewRef.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);
  if (heading) {
    previewRef.value.scrollToTarget({
      target: heading,
      scrollContainer: document.getElementById("blog-app"),
      top: 90,
    });
  }
}
</script>

<template>
  <BlogContent style="padding-top: 32px">
    <!-- 文章标题    -->
    <div class="article-header">
      <div class="article-title">{{ article?.title }}</div>
      <div class="article-info">
        <span>发布时间: {{article?.publishDate}}</span>
      </div>
    </div>
    <template #content>
      <MdPreview style="background: transparent" :editorId="id" :modelValue="artContent" />
    </template>
    <template #sidebar>
      <div class="article-outline">
        <!-- 目录        -->
        <div class="outline-title">文章目录</div>
        <MdCatalog :editorId="id" :scrollElement="scrollElement" />
      </div>
    </template>

  </BlogContent>
</template>

<style scoped lang="scss">

.article-header {
  height: fit-content;
  .article-title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 12px;
    background: -webkit-linear-gradient(10deg, #bd34fe 5%, #e43498 15%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.article-outline {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  border-radius: var(--blog-card-border-radius);
  background: white;
  position: sticky;
  top: 20px;
}



/*

.details {
  padding: 16px;
  .details-header {
    display: flex;
    align-items: center;
    padding-left: 30px;
    height: 120px;
    font-weight: bold;
    font-size: 30px;
    .title {
      !*下边框*!
      border-bottom: 2px solid #ccc;
    }
  }
  .details-content {
    display: flex;
    margin: 16px auto;
  }


  .content {
    width: 100%;
    margin-right: 16px;
  }
}

.details-outline {
  position: sticky;
  top: 0;
  width: 360px;
  height: fit-content;
  line-height: 6px;
  padding: 20px;
  font-weight: bold;

  .outline-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #ccc;
  }

  .outline-item {
    a {
      cursor: pointer;
      color: black;
    }

    !*一行展示不换行*!
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    display: flex;
    align-items: center;
    line-height: 26px;

    &:hover {
      a {
        text-decoration: underline;
      }
    }
  }
}

*/

</style>
